<template>
  <div>
    <div v-if="returnIsSuccess">
      <el-row type="flex" justify="center" align="middle" class="licc-return-operation-top-row">
        <el-row type="flex" justify="center" align="middle"  style="width:1100px;">
          <el-col class="licc-return-operation-list-bread">
            <el-row>
              <el-col class="licc-return-operation-list-bread-A"><a>申请退货</a></el-col>
            </el-row>
          </el-col>
        </el-row>
      </el-row>
      <el-row type="flex" justify="center" align="middle" class="licc-return-operation-row">
        <el-row type="flex" justify="center" align="top"  style="width:1100px; background-color: #fff;min-height: 300px">
          <el-col class="licc-return-operation-col">
            <el-row>
              <el-col>
                <el-table :data="orderGoods">
                  <el-table-column label="详情" width="330">
                    <template slot-scope="scope">
                      <div style="float: left">
                        <el-image
                          style="width: 60px; height: 60px"
                          :src="scope.row.goodsUrl"
                          fit="cover"></el-image>
                      </div>
                      <div style="float: left; padding-left: 10px; overflow: hidden">
                        <a>{{scope.row.goodsSn}}</a><br/>
                        <a>{{scope.row.goodsName}}</a>
                      </div>
                    </template>
                  </el-table-column>
                  <el-table-column property="goodsAttr" label="尺寸" width="170"></el-table-column>
                  <el-table-column label="数量" width="100">
                    <template slot-scope="scope">x{{scope.row.goodsNumber}}</template>
                  </el-table-column>
                  <el-table-column label="单价" width="100">
                    <template slot-scope="scope">¥{{scope.row.goodsPrice}}</template>
                  </el-table-column>
                </el-table>
              </el-col>
            </el-row>
            <el-row>
              <el-col>
                <el-form :model="orderInfo" class="licc-return-operation-form" label-width="110px">
                  <el-form-item label="订单号：">{{orderInfo.orderSn}}</el-form-item>
                  <el-form-item label="发货单号：">{{orderInfo.invoiceNo}}</el-form-item>
                  <el-form-item label="总额：">{{orderInfo.goodsAmount}}</el-form-item>
                  <el-form-item label="购买人手机号：">{{orderInfo.phone}}</el-form-item>
                  <el-form-item label="收货人姓名：">{{orderInfo.consignee}}</el-form-item>
                  <el-form-item label="收货人手机号：">{{orderInfo.phone}}</el-form-item>
                  <el-form-item label="收货地址：">
                    {{orderInfo.province}}{{orderInfo.city}}{{orderInfo.district}}{{orderInfo.street}}-{{orderInfo.address}}
                  </el-form-item>
                  <el-form-item label="订单留言：">
                    {{orderInfo.postscript}}
                  </el-form-item>
                  <el-timeline>
                    <el-timeline-item
                      v-for="(activity, index) in orderActivities"
                      :key="index"
                      :color="activity.color"
                      :timestamp="activity.timestamp">
                      {{activity.content}}
                    </el-timeline-item>
                  </el-timeline>
                </el-form>
              </el-col>
            </el-row>
            <!-- 订单信息---开始 -->
            <el-row>
              <el-col>
                <el-form :model="orderReturnInfo" :rules="orderReturnInfoRules" ref="orderReturnInfo" label-width="110px">
                  <el-form-item label="退货原由：" prop="returnNote">
                    <el-input type="textarea" name="returnNote" v-model="orderReturnInfo.returnNote" placeholder="请输入退货原由"></el-input>
                  </el-form-item>
                  <el-form-item style="text-align: left">
                    <el-button type="primary" @click="returnLastButton">返 回</el-button>
                    <el-button type="danger" @click="returnSubimtButton">提交退货</el-button>
                  </el-form-item>
                </el-form>
              </el-col>
            </el-row>
          </el-col>
        </el-row>
      </el-row>
    </div>
    <div v-if="!returnIsSuccess">
      <el-row type="flex" justify="center" align="middle" class="licc-return-operation-row">
        <el-row type="flex" justify="center" align="top"  style="width:1100px; background-color: #fff;min-height: 300px">
          <el-col class="licc-return-operation-col">
            <el-row>
              <el-col style="font-weight: bold; font-size: 18px; margin-top: 30px">申 请 成 功</el-col>
              <el-col><el-divider></el-divider></el-col>
              <el-col>等待商城处理退货申请</el-col>
              <el-col style="margin-top: 10px">近期商城人员会与您联系，请耐心等待</el-col>
              <el-col><el-divider></el-divider></el-col>
              <el-col class="return-success-bottom">
                <router-link :to="{name:'home'}">返回首页</router-link>
                <router-link :to="{name:'returnGoods'}" style="padding-left: 20px">进入退货订单列表</router-link>
              </el-col>
            </el-row>
          </el-col>
        </el-row>
      </el-row>
    </div>
  </div>
</template>
<script>
  import orderApi from '@/api/order'
  export default {
    name: 'page401',
    data() {
      const validateReturnNote = (rule, value, callback) => {
        if (value === ''||typeof(value)=="undefined") {
          callback(new Error('请输入退货原由'));
        }else if (value.length > 120){
          callback(new Error('字数超过120字'));
        }
        callback();
      }
      return {
        query: this.$route.query,
        returnIsSuccess: true,
        /** 订单信息 **/
        orderInfo:{},
        /** 订单商品信息 **/
        orderGoods:[],
        /** 订单流程信息 **/
        orderActivities:[],
        /** 订单退货理由 **/
        orderReturnInfo:{},
        orderReturnInfoRules:{
          returnNote:[{required: true, trigger: 'blur', validator: validateReturnNote}]
        }
      }
    },
    created(){
      this.initPage();
    },
    methods: {
      initPage() {
        orderApi.getOrderInfoById({orderId:this.query.orderId}).then(res => {
          this.orderInfo = res.data;
          this.orderGoods = res.data.orderGoods;
          this.setOrderActivities(res.data);
        }).catch(() => {
          this.$notify.error({title:'系统错误，请稍后再试'});
        })
      },
      setOrderActivities(orderInfo){
        this.orderActivities.push({ content: '下单时间', color: '#909399', timestamp: orderInfo.addTime});
        this.orderActivities.push({ content: '支付时间', color: '#409EFF', timestamp: orderInfo.payTime});
        this.orderActivities.push({ content: '发货时间', color: '#909399', timestamp: orderInfo.shippingTime});
        this.orderActivities.push({ content: '收货时间', color: '#67C23A', timestamp: orderInfo.deliveryTime});
      },
      /** 返回按钮 **/
      returnLastButton(){
        this.$router.go(-1);
      },
      /** 提交退货 **/
      returnSubimtButton(){

        this.$refs['orderReturnInfo'].validate(valid => {
          if (valid){
            let params ={
              returnNote: this.orderReturnInfo.returnNote,
              orderId: this.orderInfo.id
            };
            orderApi.saveOrderReturnInfo(params).then(res => {
              this.$notify.success({title:'成功',message:'申请退货成功'});
              this.returnIsSuccess = false;
            }).catch(() => {
              this.$notify.error({title: '失败', message: '申请退货失败，请稍后再试'});
            })
          } else {
            this.$notify({title: '提示', message: '输入的信息不合规', type: 'warning'});
          }
        });
      },
    }
  }
</script>
<style>
  .licc-return-operation-top-row{
    width: 100%;
    margin-top: 20px;
  }
  .licc-return-operation-list-bread{
    width: 1100px;
    text-align: left;
    height: 50px;
    line-height: 50px;
    padding-left: 20px;
    background-color: #fff;;
  }
  .licc-return-operation-list-bread a{
    color: #606266;
    text-decoration: none;
    cursor: pointer;
    outline: 0;
  }
  .licc-return-operation-list-bread-A{
    text-align: center;
    width: 100px;
    border-bottom: 0px;
  }
  /** 顶部结束 **/
  .licc-return-operation-row{
    width: 100%;
    margin-top: 20px;
  }
  .licc-return-operation-col{
    width: 1100px;
    padding: 10px;
  }
  /** 表格 **/

  .licc-return-operation-form>.el-timeline>.el-timeline-item{
    text-align: left;
  }
  .licc-return-operation-form>.el-form-item{
    margin-bottom: 0px;
    text-align: left;
  }
  .return-success-bottom a{
    font-size: 12px;
    color: #aaa;
  }
  .return-success-bottom a:hover{
    color: #c56C6c;
  }
</style>
